<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
<div id="app" v-clock>
    <div>
        <!--
        注意:
        直接使用 <img src="'images/'+url+'.jpg'" alt=""> 那么会直接访问 url.jpg
        需要:
        v-bind属性的作用是将普通的w3c属性变为动态属性，让属性具有动态能力
        此时vue会编译带有v-bind的属性，然后返回编译后结果
        可以将v-bind: 简写为 :
        -->
        <img v-bind:src="'images/'+url+'.jpg'" alt="">
        <img :src="'images/'+url+'.jpg'" alt="">
    </div>
    <button @click="add">点击加1</button>
    <button @click="minus">点击减1</button>
</div>
<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            url: 0
        },
        methods: {
            add(event) {
                this.url++
                if (this.url >= 5) {
                    //值越界则重置
                    this.url = 0;
                }
            },
            minus() {
                if (this.url <= 0) {
                    //值越界则重置
                    this.url = 5;
                }
                this.url--
            }
        }
    })
</script>
</body>
</html>